<template>
  <a-modal
    title="修改房產"
    :width="900"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <div>
      <a-form :form="form1" v-if="type === '1'">
        <a-form-item v-show="false"><a-input v-decorator="['id']" /></a-form-item>
        <a-form-item v-show="false"><a-input v-decorator="['category', { initialValue: '1' }]" /></a-form-item>
        <a-form-item label="房產名" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
          <a-input
            placeholder="请输入公寓名"
            v-decorator="['name', { rules: [{ required: true, message: '请输入公寓名' }] }]"
          />
        </a-form-item>
        <a-form-item label="房產地址" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
          <a-input
            placeholder="请输入房產地址"
            v-decorator="['address', { rules: [{ required: true, message: '请输入房產地址！' }] }]"
          />
        </a-form-item>
        <a-form-item label="房產類型" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-select
            style="width: 100%"
            placeholder="请选择房產類型"
            v-decorator="['houseType', { rules: [{ required: true, message: '请选择房產類型！' }] }]"
          >
            <a-select-option v-for="(item, index) in houseTypeData" :key="index" :value="item.code">{{
              item.name
            }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="電梯樓梯配置" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-radio-group
            placeholder="请选择计算费用时月天数"
            v-decorator="[
              'elevator',
              { initialValue: 1, rules: [{ required: true, message: '请选择计算费用时月天数！' }] },
            ]"
          >
            <a-radio key="0" :value="1">電梯</a-radio>
            <a-radio key="1" :value="2">樓梯</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-divider />
        <a-form-item label="負責人" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
          <a-input placeholder="请输入負責人" v-decorator="['principal']" />
        </a-form-item>
        <a-form-item label="聯係電話" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
          <a-input placeholder="请输聯係電話" v-decorator="['phone']" />
        </a-form-item>
        <a-divider />
        <a-form-item label="房號前綴" :labelCol="labelCol" :wrapperCol="wrapperCol" >
          <a-input placeholder="A1018(A=前綴)" v-decorator="['roompre']" />前綴在保存房產后自動加到房間號前面
        </a-form-item>
        <a-form-item label="房號后缀" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input placeholder="A1018(8=后綴)" v-decorator="['roomsuf']" />后綴在保存房產后自動加到房間號后面
        </a-form-item>
      </a-form>
      <a-form :form="form2" v-if="type === '2'">
        <a-form-item v-show="false"><a-input v-decorator="['id']" /></a-form-item>
        <a-form-item v-show="false"><a-input v-decorator="['category', { initialValue: '2' }]" /></a-form-item>
        <a-form-item label="房產名" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
          <a-input
            placeholder="请输入公寓名"
            v-decorator="['name', { rules: [{ required: true, message: '请输入公寓名' }] }]"
          />
        </a-form-item>
        <a-form-item label="房產地址" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
          <a-input
            placeholder="请输入房產地址"
            v-decorator="['address', { rules: [{ required: true, message: '请输入房產地址！' }] }]"
          />
        </a-form-item>
        <a-form-item label="房產類型" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-select
            style="width: 100%"
            placeholder="请选择房產類型"
            v-decorator="['houseType', { rules: [{ required: true, message: '请选择房產類型！' }] }]"
          >
            <a-select-option v-for="(item, index) in houseTypeData" :key="index" :value="item.code">{{
              item.name
            }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-divider />
        <a-form-item label="負責人" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
          <a-input placeholder="请输入負責人" v-decorator="['principal']" />
        </a-form-item>
        <a-form-item label="聯係電話" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
          <a-input placeholder="请输聯係電話" v-decorator="['phone']" />
        </a-form-item>
      </a-form>
    </div>
  </a-modal>
</template>
<script>
import { busRealEstateEdit } from '@/api/modular/main/busrealestate/busRealEstateManage'
export default {
  data() {
    return {
      visible: false,
      confirmLoading: false,
      type: '1',
      form1: this.$form.createForm(this),
      form2: this.$form.createForm(this),
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 15 }
      },
      houseTypeData: []
    }
  },
  methods: {
    loadData() {
      const bedroomsOption = this.$options
      this.houseTypeData = bedroomsOption.filters['dictData']('house_type')
    },
    // 初始化方法
    edit(record, type) {
      this.loadData()
      this.visible = true
      this.type = type
      setTimeout(() => {
        if (type === '1') {
          this.form1.setFieldsValue({
            id: record.id,
            name: record.name,
            address: record.address,
            principal: record.principal,
            phone: record.phone,
            houseType: record.houseType,
            // 集中式
            elevator: record.elevator,
            roompre: record.roompre,
            roomsuf: record.roomsuf
          })
        } else {
          this.form2.setFieldsValue({
            id: record.id,
            name: record.name,
            address: record.address,
            principal: record.principal,
            phone: record.phone,
            houseType: record.houseType + ''
          })
        }
      }, 100)
    },
    handleSubmit() {
      if (this.type === '1') {
        this.handleSubmit1()
      } else {
        this.handleSubmit2()
      }
    },
    handleSubmit1() {
      const {
        form1: { validateFields }
      } = this
      this.confirmLoading = true
      validateFields((errors, values) => {
        if (!errors) {
          for (const key in values) {
            if (typeof values[key] === 'object') {
              values[key] = JSON.stringify(values[key])
            }
          }
          busRealEstateEdit(values)
            .then((res) => {
              if (res.code === 200) {
                this.$message.success('编辑成功')
                this.confirmLoading = false
                this.$emit('ok', '1')
                this.handleCancel()
              } else {
                this.$message.error(res.msg) // + res.message
              }
            })
            .finally((res) => {
              this.confirmLoading = false
            })
        } else {
          this.confirmLoading = false
        }
      })
    },
    handleSubmit2() {
      const {
        form2: { validateFields }
      } = this
      this.confirmLoading = true
      validateFields((errors, values) => {
        if (!errors) {
          for (const key in values) {
            if (typeof values[key] === 'object') {
              values[key] = JSON.stringify(values[key])
            }
          }
          busRealEstateEdit(values)
            .then((res) => {
              if (res.code === 200) {
                this.$message.success('编辑成功')
                this.confirmLoading = false
                this.$emit('ok', '2')
                this.handleCancel()
              } else {
                this.$message.error(res.msg) // + res.message
              }
            })
            .finally((res) => {
              this.confirmLoading = false
            })
        } else {
          this.confirmLoading = false
        }
      })
    },
    handleCancel() {
      this.form1.resetFields()
      this.form2.resetFields()
      this.visible = false
    }
  }
}
</script>
<style lang="less">
</style>
